<template>
  <div
    class="com-global-drag-view"
    :style="{ width: `${width}px`, height: `${height}px`, left: `${boxPosition.x}px`, top: `${boxPosition.y}px` }"
    ref="ComGlobalDragView"
    @mousedown="mousedown">
    <slot/>
  </div>
</template>

<script>
  export default {
    name: "ComGlobalDragView",
    props: {
      width: {
        type: Number,
        default: 100
      },
      height: {
        type: Number,
        default: 100
      },
      left: {
        type: Number,
        default: 100
      },
      top: {
        type: Number,
        default: 100
      },
      topArea: {
        type: Number,
        default: 0
      },
      leftArea: {
        type: Number,
        default: 0
      },
      rightArea: {
        type: Number,
        default: 0
      },
      bottomArea: {
        type: Number,
        default: 0
      }
    },
    data(){
      return {
        /**
         * 向下按的位置
         */
        downPosition: {
          x: 0,
          y: 0,
          offX: 0,
          offY: 0
        },
        /**
         * 盒子的位置
         */
        boxPosition: {
          x: 0,
          y: 0
        },
        /**
         * 是否点击
         */
        isClick: false
      }
    },
    computed: {

    },
    methods: {
      screenWidth() {
        return document.documentElement.clientWidth
      },
      screenHeight() {
        return document.documentElement.clientHeight
      },
      mousedown(e) {
        this.isClick = true
        this.downPosition.x = e.clientX
        this.downPosition.y = e.clientY
        this.downPosition.offX = this.downPosition.x - this.boxPosition.x
        this.downPosition.offY = this.downPosition.y - this.boxPosition.y
      },
      addEvents() {
        document.addEventListener('mousemove', (e) => {
          if (!this.isClick) { return }
          let x = e.clientX - this.downPosition.offX
          let y = e.clientY - this.downPosition.offY
          if (x < this.leftArea) {
            x = this.leftArea
          } else {
            const maxX = this.screenWidth() - this.rightArea - this.width
            if (x > maxX) {
              x = maxX
            }
          }
          if (y < this.topArea) {
            y = this.topArea
          } else {
            const maxY = this.screenHeight() - this.bottomArea - this.height
            if (y > maxY) {
              y = maxY
            }
          }
          this.boxPosition.x = x
          this.boxPosition.y = y
        })
        document.addEventListener('mouseup', () => {
          this.isClick = false
        })
      },
      clearEvent() {
        document.removeEventListener('mousemove')
        document.removeEventListener('mouseup')
      }
    },
    mounted() {
      this.boxPosition.x = this.left
      this.boxPosition.y = this.top
      this.addEvents()
    },
    beforeDestroy() {
      this.clearEvent()
    }
  }
</script>

<style lang="scss" scoped>
  .com-global-drag-view {
    background-color: #BF360C;
    position: fixed;
  }
</style>
